<template>
    <div>
        <div class="echart_size"  :id="id"></div>
    </div>
</template>

<script>

import * as echarts from 'echarts'

export default { 
  props: {
    id: {
            type: String,
            default: ''
        },
        text: {
            type: String,
            default: ''
        },
        datas: {
            type: Array,
            default: () => []
        } 
  },
  data() {
    return { 
    };
  }, 
  created() {
        this.$nextTick(() => {
            this.barBtn()
        })
    },
  methods: {
    // 删除图片
    barBtn( ) { 
      let datas = this.datas
      if(this.datas==null||this.datas.length==0){
      
        datas = [
        { num: 1,  name: '无数据' }, 
      ];
      }
      
      let nameList = [];
      let total=0;
    
      datas.forEach((fa) => {
        nameList.push({ name: fa.name, value: fa.num  });
      });

    let    option1 = { 
          title: {
            text: this.text,
            left: 'center',
            top: 'center'
          },
          grid: {
            top: '0',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            show: false
          },
  tooltip: {
    trigger: 'item',
    formatter: ' {b}: {c} ({d}%)'
  }, 
  series: [
  
    {
      name:  this.text,
      type: 'pie',
      radius: ['45%', '60%'],
      labelLine: {
        length: 30
      },
      label: {
        formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: nameList
    }
  ]
};
        let myCharts = echarts.init(document.getElementById(this.id))
        myCharts.setOption(option1)
            // 让图表跟随屏幕自动的去适应
            window.addEventListener('resize', function () {
                myCharts.resize()
            }) 
    },
    
  }
};
</script> 
<style lang="scss" scoped>
.echart_size{
    width: 100%;
    height: 600px;
}
</style>